Name the different lifecycle methods along with phases in which they are called.

lifecycle methods in class components are used to control the behaviour of components during different phases of their lifecycle. However, with the introduction of React Hooks and the Fiber architecture, the concept of lifecycle methods has evolved.

Mounting Phase:

1
constructor
2
static getDerivedStateFromProps
3
render()
4
componentDidMount()
5
UNSAFE_componentWillMount()

Updating Phase:

1
static getDerivedStateFromProps()
2
shouldComponentUpdate()
3
render()
4
getSnapshotBeforeUpdate()
5
componentDidUpdate()
6
UNSAFE_componentWillUpdate()
7
UNSAFE_componentWillReceiveProps()

Unmounting Phase:

1
componentWillUnmount()

Error Handling Phase:

1
static getDerivedStateFromError()
2
componentDidCatch()

Difficulty: 6/10

Topics: mounting, updating, unmounting

Scenario Questions

0-2 years experience

1
If you add a console.log in componentDidMount of a class component, when will it appear relative to the first render?
2
How would you fetch data when a component first appears on screen using lifecycle methods?
3
What happens if you call setState inside componentWillUnmount?

2-5 years experience

1
You notice that a component's UI doesn't update after props change. Which lifecycle method would you check and why?
2
During a refactor, componentWillReceiveProps caused a bug when props changed rapidly. How would you fix it using newer lifecycle methods?
3
Explain why using componentDidUpdate to trigger an API call caused an infinite loop, and how to prevent it.

5-8 years experience

1
Design a reusable modal component that needs to clean up event listeners and timers. Which lifecycle methods would you use and what edge cases must you handle?
2
In a large app, you need to coordinate animations across multiple components during mounting and unmounting. How would you orchestrate this using lifecycle hooks while minimizing performance impact?
3
How would you migrate a legacy class component that relies on componentWillMount to a functional component with hooks, ensuring no change in behavior?

8+ years experience

1
Your team is planning to deprecate all class components in a codebase of 500+ components. What strategy would you propose for handling lifecycle methods during the migration, and how would you mitigate risk across teams?
2
Discuss the trade‑offs of using getDerivedStateFromProps versus moving state management to a global store in a high‑traffic dashboard, considering render performance and maintainability.
3
How would you set up a shared library that abstracts common lifecycle patterns (e.g., data fetching, subscription cleanup) for both class and functional components, and what versioning considerations would you enforce?

Follow-up Questions

❓Can you walk me through how you'd test the cleanup logic you described?
❓What are the potential pitfalls of using getDerivedStateFromProps in this scenario?
❓How would you monitor the performance impact after implementing your solution?